<template>
	<div style="height: 100%; width: 100%">
        <div style="height: 100%; width: 100%;" ref="chartsWarningRefNode"></div>
	</div>
</template>
 
<script setup lang="ts" name="funGridLayout">
import * as echarts from 'echarts';
import 'echarts-wordcloud';
import {reactive, onMounted, watch, nextTick, onActivated, ref } from 'vue';

const props = withDefaults(defineProps<{
    data: Array<{value: number, name: string}>
}>(), {
    data: () => ([]),
})

const chartsWarningRefNode = ref(); 
const state = reactive({
	status: 1, 
	myCharts: [] as EmptyArrayType,
	charts: {
		theme: '',
		bgColor: '',
		color: '#303133',
	},
});

// 初始化近30天预警总数
const initChartsWarning = () => {
    if(!chartsWarningRefNode.value) return;
	const myChart = echarts.init(chartsWarningRefNode.value);
	const option = {
  title: {
    text: 'Stacked Area Chart'
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      label: {
        backgroundColor: '#6a7985'
      }
    }
  },
  legend: {
    data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
  },
  toolbox: {
    feature: {
      saveAsImage: {}
    }
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: [
    {
      type: 'category',
      boundaryGap: false,
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    }
  ],
  yAxis: [
    {
      type: 'value'
    }
  ],
  series: [
    {
      name: 'Email',
      type: 'line',
      stack: 'Total',
      areaStyle: {},
      emphasis: {
        focus: 'series'
      },
      data: [120, 132, 101, 134, 90, 230, 210]
    },
    {
      name: 'Union Ads',
      type: 'line',
      stack: 'Total',
      areaStyle: {},
      emphasis: {
        focus: 'series'
      },
      data: [220, 182, 191, 234, 290, 330, 310]
    },
    {
      name: 'Video Ads',
      type: 'line',
      stack: 'Total',
      areaStyle: {},
      emphasis: {
        focus: 'series'
      },
      data: [150, 232, 201, 154, 190, 330, 410]
    },
    {
      name: 'Direct',
      type: 'line',
      stack: 'Total',
      areaStyle: {},
      emphasis: {
        focus: 'series'
      },
      data: [320, 332, 301, 334, 390, 330, 320]
    },
    {
      name: 'Search Engine',
      type: 'line',
      stack: 'Total',
      label: {
        show: true,
        position: 'top'
      },
      areaStyle: {},
      emphasis: {
        focus: 'series'
      },
      data: [820, 932, 901, 934, 1290, 1330, 1320]
    }
  ]
};
	myChart.setOption(option);
	state.myCharts.push(myChart);
};
// 批量设置 echarts resize
const initEchartsResizeFun = () => {
	nextTick(() => {
		for (let i = 0; i < state.myCharts.length; i++) {
			state.myCharts[i].resize();
		}
	});
};
// 批量设置 echarts resize
const initEchartsResize = () => {
	window.addEventListener('resize', initEchartsResizeFun);
};
// 页面加载时
onMounted(() => {
	// setTimeout(() => {
	// 	initChartsWarning();
	// 	initEchartsResize();
	// }, 1000);
    // initChartsWarning();
    // console.log(props.data);
});
// 由于页面缓存原因，keep-alive
onActivated(() => {
	//initEchartsResizeFun();
});
// 监听 pinia 中的 tagsview 开启全屏变化，重新 resize 图表，防止不出现/大小不变等
watch(
	() => props,
	() => { 
        nextTick(() => {
            initChartsWarning();
        })
	},
    {
        immediate: true
    }
);
</script>

<style scoped lang="scss">
.grid-layout-container {
    
	.vue-grid-item {
		// color: var(--el-color-white);
		color: #333;
	}
}
</style>
